<template>
    <div class="page-container" :style="{background:bgColor}">
        <!-- 顶部导航区域 -->
        <div class="navigation" ref="navigation" :style="{fontSize:titleSize + 'px',color:titleColor}">
            农业数据实时监控系统
        </div>
        <div class="changeTheme" @click="change">主题切换</div>
        <!-- 底部大盒子 -->
        <div class="content">
            <!-- 左侧俩个 -->
            <div class="left-content">
                <div class="left-content-top">
                    <AreaTopPageVue></AreaTopPageVue>
                </div>
                <div class="left-content-bottom">
                    <Harvest></Harvest>
                </div>
            </div>
            <!-- 中间俩个 -->
            <div class="center-content">
                <div class="center-content-top">
                    <plant></plant>
                </div>
                <div class="center-content-bottom">
                    <Cropmap></Cropmap>
                </div>
            </div>
            <!-- 右侧俩个 -->
            <div class="right-content">
                <div class="right-content-top">
                    <linebox></linebox>
                </div>
                <div class="right-content-bottom">
                    <shi></shi>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script>
import AreaTopPageVue from './AreaTopPage.vue';
import Cropmap from './Cropmap.vue';
import Harvest from './Harvest.vue';
import linebox from './line.vue';
import plant from './plant.vue';
import shi from './shi.vue';
export default {
    data() {
        return {
            titleSize:0,
            bgColor:'#fff',
            titleColor:'#000',
            isOn:true
        }
    },
    components: {
        AreaTopPageVue,
        Cropmap,
        Harvest,
        linebox,
        plant,
        shi
    },
    mounted() {
        this.screen()
        window.addEventListener('resize',this.screen)
    },
    methods: {
        screen(){
            this.titleSize = this.$refs.navigation.offsetWidth / 40
        },
        // 切换主题
        change(){
            this.isOn = !this.isOn
            if(this.isOn){
                this.bgColor = '#fff'
                this.titleColor = '#000'
            }else{
                this.bgColor = '#000'
                this.titleColor = '#fff'
            }
            this.$store.commit('change',this.isOn)
        }
    }
}
</script>
  
<style scoped>
.page-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* background-image: url(../../public/static/img/bgc01.png) */
    /* background-color: #333333; */
}

/* 顶部导航样式 */
.navigation {
    flex: 2;
    width: 100%;
    /* background-color: orange; */
    background-image: url(../../public/top02.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    font-weight: 600;
    color: #000;
    text-align: center;
    /* line-height: 3.2rem; */
}

.content {
    flex: 15;
    display: flex;
}

/* 左侧盒子 */
.content .left-content {
    flex: 1;
    /* border: 1px solid #38C5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.content .left-content .left-content-top {
    width: 95%;
    height: 53%;
    border: 1px solid #38C5EC;
}

.content .left-content .left-content-bottom {
    width: 95%;
    height: 42%;
    border: 1px solid #38C5EC;
}

/* 中间盒子 */
.content .center-content {
    flex: 2;
    /* border: 1px solid #38C5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.content .center-content .center-content-top {
    width: 95%;
    height: 22%;
    border: 1px solid #38C5EC;
}

.content .center-content .center-content-bottom {
    width: 95%;
    height: 75%;
    border: 1px solid #38C5EC;
}

/* 右侧盒子 */
.content .right-content {
    flex: 1;
    /* border: 1px solid #38C5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.content .right-content .right-content-top {
    width: 95%;
    height: 48%;
    border: 1px solid #38C5EC;
}

.content .right-content .right-content-bottom {
    width: 95%;
    height: 48%;
    border: 1px solid #38C5EC;
}

/* 主题切换 */
.changeTheme {
    color: #4CD964;
    position: fixed;
    top: 0.225rem;
    right: 1.25rem;
}
</style>